<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>【面试】2020年底面经 | 俊劫的学习基地</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/favicon.ico">
    <meta name="description" content="俊劫的学习基地是俊劫的个人博客，用于记录学习笔记、分享音乐、书籍、旅行等个人兴趣的站点。">
    <meta name="keywords" content="俊劫,俊劫的博客,博客,个人博客,vue,vuejs,vuepress,vuepress-theme-reco">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.5f3e1891.css" as="style"><link rel="preload" href="/assets/js/app.070ad525.js" as="script"><link rel="preload" href="/assets/js/2.1d15da37.js" as="script"><link rel="preload" href="/assets/js/38.4e0ec907.js" as="script"><link rel="preload" href="/assets/js/4.aab0e518.js" as="script"><link rel="prefetch" href="/assets/js/10.46adc9c3.js"><link rel="prefetch" href="/assets/js/11.4fa3a97f.js"><link rel="prefetch" href="/assets/js/12.d930e0cf.js"><link rel="prefetch" href="/assets/js/13.ac14e905.js"><link rel="prefetch" href="/assets/js/14.5db5f3a5.js"><link rel="prefetch" href="/assets/js/15.f912d397.js"><link rel="prefetch" href="/assets/js/16.dc881375.js"><link rel="prefetch" href="/assets/js/17.4b5e68db.js"><link rel="prefetch" href="/assets/js/18.e48da6e4.js"><link rel="prefetch" href="/assets/js/19.4a02bf41.js"><link rel="prefetch" href="/assets/js/20.8437ea4c.js"><link rel="prefetch" href="/assets/js/21.618c8e36.js"><link rel="prefetch" href="/assets/js/22.097f8d74.js"><link rel="prefetch" href="/assets/js/23.512dda35.js"><link rel="prefetch" href="/assets/js/24.2afceb8f.js"><link rel="prefetch" href="/assets/js/25.a7a02005.js"><link rel="prefetch" href="/assets/js/26.a79e1590.js"><link rel="prefetch" href="/assets/js/27.d0feb2c1.js"><link rel="prefetch" href="/assets/js/28.62b630e3.js"><link rel="prefetch" href="/assets/js/29.119f3256.js"><link rel="prefetch" href="/assets/js/3.8b40c051.js"><link rel="prefetch" href="/assets/js/30.5b11ce87.js"><link rel="prefetch" href="/assets/js/31.94ce824a.js"><link rel="prefetch" href="/assets/js/32.ed4f7508.js"><link rel="prefetch" href="/assets/js/33.c74281cf.js"><link rel="prefetch" href="/assets/js/34.ffb262b0.js"><link rel="prefetch" href="/assets/js/35.ada11000.js"><link rel="prefetch" href="/assets/js/36.edb96889.js"><link rel="prefetch" href="/assets/js/37.02fd03c3.js"><link rel="prefetch" href="/assets/js/39.8cd27589.js"><link rel="prefetch" href="/assets/js/40.e59f0b3b.js"><link rel="prefetch" href="/assets/js/41.e3da8313.js"><link rel="prefetch" href="/assets/js/42.c847d1f4.js"><link rel="prefetch" href="/assets/js/43.13c84445.js"><link rel="prefetch" href="/assets/js/44.cbaa9acf.js"><link rel="prefetch" href="/assets/js/45.cb3a266d.js"><link rel="prefetch" href="/assets/js/46.0519c642.js"><link rel="prefetch" href="/assets/js/47.3373a57e.js"><link rel="prefetch" href="/assets/js/48.7efa5760.js"><link rel="prefetch" href="/assets/js/49.923721c8.js"><link rel="prefetch" href="/assets/js/5.07f41da3.js"><link rel="prefetch" href="/assets/js/50.839ac91d.js"><link rel="prefetch" href="/assets/js/51.f98cecb2.js"><link rel="prefetch" href="/assets/js/52.041f20b3.js"><link rel="prefetch" href="/assets/js/53.9464df60.js"><link rel="prefetch" href="/assets/js/54.a9ce67d2.js"><link rel="prefetch" href="/assets/js/55.9733d4b3.js"><link rel="prefetch" href="/assets/js/56.e67c1aa1.js"><link rel="prefetch" href="/assets/js/57.1335a8a7.js"><link rel="prefetch" href="/assets/js/58.83f617d8.js"><link rel="prefetch" href="/assets/js/59.b74c2845.js"><link rel="prefetch" href="/assets/js/6.dcf50b6e.js"><link rel="prefetch" href="/assets/js/60.6e3b00bd.js"><link rel="prefetch" href="/assets/js/61.cd335db9.js"><link rel="prefetch" href="/assets/js/62.ee277d48.js"><link rel="prefetch" href="/assets/js/63.2a34cfa5.js"><link rel="prefetch" href="/assets/js/64.a51989fe.js"><link rel="prefetch" href="/assets/js/65.3abfaea5.js"><link rel="prefetch" href="/assets/js/66.d4f35c55.js"><link rel="prefetch" href="/assets/js/67.2f070f74.js"><link rel="prefetch" href="/assets/js/68.c7da856f.js"><link rel="prefetch" href="/assets/js/69.6c15fcd4.js"><link rel="prefetch" href="/assets/js/7.10c46d97.js"><link rel="prefetch" href="/assets/js/70.68b6cf93.js"><link rel="prefetch" href="/assets/js/71.c49db210.js"><link rel="prefetch" href="/assets/js/72.7ffae8af.js"><link rel="prefetch" href="/assets/js/73.abb40ede.js"><link rel="prefetch" href="/assets/js/74.71723883.js"><link rel="prefetch" href="/assets/js/75.ab7e2e75.js"><link rel="prefetch" href="/assets/js/76.936112a6.js"><link rel="prefetch" href="/assets/js/8.ec9c3735.js"><link rel="prefetch" href="/assets/js/9.b555605d.js">
    <link rel="stylesheet" href="/assets/css/0.styles.5f3e1891.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container have-rightmenu" data-v-f848d4e8><div class="global-loading-wrapper" data-v-2c41f3eb data-v-f848d4e8 data-v-f848d4e8><div class="loader-main" data-v-2c41f3eb><img src="/assets/img/loading.a592e2e5.jpg" alt="loading" data-v-2c41f3eb></div></div> <div class="hide" data-v-f848d4e8><header class="navbar" data-v-f848d4e8><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="俊劫的学习基地" class="logo"> <span class="site-name">俊劫的学习基地</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">选择模式</h4> <ul class="color-mode-options"><li class="dark">深色模式</li><li class="light active">浅色模式</li><li class="read">阅读模式</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <ul class="suggestions" style="display:none;"></ul></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-f848d4e8></div> <aside class="sidebar" data-v-f848d4e8><div class="personal-info-wrapper" data-v-34faaed8 data-v-f848d4e8><img src="/img/logo.png" alt="author-avatar" class="personal-img" data-v-34faaed8> <div class="author" data-v-34faaed8>
    俊劫
  </div> <div class="personal-info-details" data-v-34faaed8><div data-v-34faaed8>文章：<span data-v-34faaed8>54</span></div> <div data-v-34faaed8>地点：<span data-v-34faaed8>canton</span></div></div> <div class="slogan" data-v-34faaed8>
    just do it
  </div> <!----></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link"><i class="iconfont reco-home"></i>首页
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i></i>前端
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>文档教程</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/web/docs/imooc/wiki/" class="nav-link"><i class="iconfont reco-blog"></i>慕课教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/es6/" class="nav-link"><i class="iconfont reco-blog"></i>ES6 入门教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/wangdoc/javascript/" class="nav-link"><i class="iconfont reco-blog"></i>网道-JavaScript 教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/angular/" class="nav-link"><i class="iconfont reco-blog"></i>Angular 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/react/" class="nav-link"><i class="iconfont reco-blog"></i>React 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/vue/" class="nav-link"><i class="iconfont reco-blog"></i>Vue 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/node/" class="nav-link"><i class="iconfont reco-blog"></i>Node 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/babel/" class="nav-link"><i class="iconfont reco-blog"></i>Babel 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/webpack/" class="nav-link"><i class="iconfont reco-blog"></i>Webpack 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/typescript/" class="nav-link"><i class="iconfont reco-blog"></i>TypeScript 文档
</a></li><li class="dropdown-subitem"><a href="/web/docs/runoob/" class="nav-link"><i class="iconfont reco-blog"></i>菜鸟教程
</a></li><li class="dropdown-subitem"><a href="/web/docs/docschina/" class="nav-link"><i class="iconfont reco-blog"></i>印记中文
</a></li></ul></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-api"></i>索引
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link"><i class="iconfont reco-category"></i>分类
</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link"><i class="iconfont reco-tag"></i>标签
</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link"><i class="iconfont reco-date"></i>归档
</a></li></ul></div></div><div class="nav-item"><a href="/bookshop/message-board/" class="nav-link"><i class="iconfont reco-suggestion"></i>留言板
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-message"></i>关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><h4>联系</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>GitHub
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="/bookshop/linkme/" class="nav-link"><i class="iconfont reco-account"></i>关于我
</a></li></ul></li><li class="dropdown-item"><h4>博客</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="https://github.com/alexwjj/alexwjj.github.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>本站源码
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-subitem"><a href="https://alexwjj.github.io/old-blog" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-document"></i>老版博客
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></li><li class="dropdown-item"><h4>其他</h4> <ul class="dropdown-subitem-wrapper"><li class="dropdown-subitem"><a href="/bookshop/friendslink/" class="nav-link"><i class="iconfont reco-friend"></i>友情链接
</a></li></ul></li></ul></div></div> <!----></nav> <ul class="sidebar-links"><li><a href="/pages/74b89136d37c/" aria-current="page" class="active sidebar-link">【面试】2020年底面经</a></li><li><a href="/pages/ac34940436a4a/" class="sidebar-link">前端基础知识整理01</a></li><li><a href="/pages/aa9d140ec6135/" class="sidebar-link">前端基础知识整理02</a></li><li><a href="/pages/3cea8c7d5577f/" class="sidebar-link">xdm 来当当前端面试官</a></li><li><a href="/pages/9de40adc21b12/" class="sidebar-link">前端基础 - 手写系列</a></li><li><a href="/pages/f15a7725f87e7/" class="sidebar-link">【分享】2021新鲜面经和资源分享</a></li><li><a href="/pages/a336385364f8/" class="sidebar-link">【面试】前端求职之路</a></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper bg-style-5"><div class="articleInfo-wrap" data-v-13f19dad><div class="articleInfo" data-v-13f19dad><ul class="breadcrumbs" data-v-13f19dad><li data-v-13f19dad><a href="/" title="首页" class="fa fa-laptop-house router-link-active" data-v-13f19dad></a></li> <li data-v-13f19dad><a href="/categories/?category=%E9%9D%A2%E8%AF%95%E7%9B%B8%E5%85%B3" title="分类" data-v-13f19dad>面试相关</a></li> <!----> <!----></ul> <div class="info" data-v-13f19dad><div title="作者" class="author fa fa-user" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>俊劫</a></div> <div title="创建时间" class="date fa fa-calendar-alt" data-v-13f19dad><a href="javascript:;" data-v-13f19dad>2021/02/12 00:00:00</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">
            【面试】2020年底面经
          </h1> <div class="theme-vdoing-content content__default"><blockquote><p>功夫不负有心人，【有赞】目标冲击完成，过个好年</p></blockquote> <h2 id="结果"><a href="#结果" class="header-anchor">#</a> 结果</h2> <p>【有赞】 经历过五面，终于在年前最后一天发了 offer</p> <h2 id="原因"><a href="#原因" class="header-anchor">#</a> 原因</h2> <p>离职的原因无非就那几种，钱少事多不开心。</p> <h2 id="个人问题"><a href="#个人问题" class="header-anchor">#</a> 个人问题</h2> <ol><li>个人话太多，容易抢话</li> <li>回答问题容易跑题, 答非所问</li> <li>算法薄弱</li></ol> <h2 id="面试结果"><a href="#面试结果" class="header-anchor">#</a> 面试结果</h2> <h3 id="微点科技-offer"><a href="#微点科技-offer" class="header-anchor">#</a> 微点科技(offer)</h3> <h3 id="涂鸦智能-现场挂"><a href="#涂鸦智能-现场挂" class="header-anchor">#</a> 涂鸦智能(现场挂)</h3> <h3 id="海康威视-电话挂"><a href="#海康威视-电话挂" class="header-anchor">#</a> 海康威视(电话挂)</h3> <h3 id="端点科技-offer"><a href="#端点科技-offer" class="header-anchor">#</a> 端点科技(offer)</h3> <h3 id="有赞-offer"><a href="#有赞-offer" class="header-anchor">#</a> 有赞(offer)</h3> <h4 id="一面-电话-1h"><a href="#一面-电话-1h" class="header-anchor">#</a> 一面(电话 1h)</h4> <ol><li>讲讲最近的项目</li> <li>讲讲自己写的打印插件，vue-iframe-print，和其他打印方式对比。分页问题，默认背景图如何显示（知道有 css，但是记不住是那个），自定义样式等等</li> <li>权限系统（RBAC），具体实现，接口权限校验。通用接口如何校验，可复用的业务接口如何校验</li> <li>OAuth 2.0 按照当前公司的一些单点登录流程来讲的，貌似不是标准的 oauth，得下去了解一下。</li> <li>微前端（项目在用） 为什么要用微前端，和 iframe 对比了一下。微前端和容器之间的通信方式（目前 storage，也不是很好的办法）。</li> <li>实现一个水平垂直居中</li></ol> <p>几种方式：flex，margin，absolute，table-cell，grid</p> <p>flex:1 含义? 0 1 auto ，放大 缩小 基础宽度</p> <p>改变主轴方向？（flex-direction）</p> <p>主盒子 500px，三个子盒子：1 盒子 100px，2 盒子 flex：3，3 盒子 flex：1； 3 盒子的具体宽度是多少，100px</p> <ol start="7"><li>margin 塌陷？有没有遇到过其他 css 问题？</li></ol> <p>BFC解决塌陷问题，其他的说了一个 inline-block 默认边距问题</p> <ol start="8"><li>vue 响应式原理</li></ol> <p>从 data 开始，遍历 data 里面的属性，递归添加 get 和 set。在 get 的时候进行 dep 依赖收集，set 的时候进行派发更新，当触发了对应的 watcher，就会通知对应的 dep 进行 diff 和 patch，更新 dom</p> <ol start="9"><li><p>组件 data 为什么是一个函数？作用域</p></li> <li><p>vue Object.defineProperty 缺陷？数组 7 个方法怎么重写的？</p></li></ol> <p>自己说的比较全，包括 vue 源码处理，重写数组 7 个方法，$set 原理。</p> <p>重写 7 个原生数组方法，感觉自己描述的不清楚。</p> <ol start="11"><li>dep 依赖搜集与 watcher 派发更新流程？dep 是发布者还是订阅者？怎么知道每一个 watcher 要通知哪一个 dep？</li></ol> <p>dep 和 watcher 这个基本和响应式描述差不多</p> <p>dep 是订阅者</p> <p>每个 watcher 都会有个 watcherId，可以找到对应的 dep</p> <ol start="12"><li>keep-alive 原理？</li></ol> <p>缓存的 VNode，描述了一下简单用法。</p> <p>LRU 算法直接说了下概念，具体怎么用的这个算法，直接说了自己不了解</p> <ol start="13"><li>讲一讲虚拟 dom</li></ol> <p>先描述下什么是虚拟 dom，回答了什么情况下快？什么时候慢？更多的是跨平台的作用，以及这种借用对象来描述一个事物的想法。</p> <ol start="14"><li>vue diff 算法</li></ol> <p>先讲了一下没有 key 的情况，就地复用算法。</p> <p>有 key 的情况，diff 的流程，广度优先遍历</p> <p>和 react diff 对比了一下，包括 patch 的区别</p> <ol start="15"><li>为什么使用 key 能提升 diff 性能</li></ol> <p>通过 key 对比节点，更快</p> <p>map 数据结构更快</p> <ol start="16"><li><p>vue-router hash 和 history 区别</p></li> <li><p>vuex 主要解决了什么问题？跨组件通信，数据持久化，数据响应式</p></li> <li><p>判断数据类型</p></li></ol> <p>typeof，instanceOf，Object.protoType.toString.call(), Array.isArray()</p> <ol start="19"><li>this 指向的理解</li></ol> <p>声明时和运行时指向</p> <p>箭头函数指向</p> <p>修改 this 指向</p> <ol start="20"><li>call,apply,bind 区别</li></ol> <p>call，apply 参数区别，会执行一下要改变的函数</p> <p>bind 返回一个闭包，不会执行函数，而且返回的新函数 this 不可再次改变</p> <p>讲一下实现一个 bind 的思路</p> <ol start="21"><li>函数柯里化概念，常用场景</li></ol> <p>简单讲了下什么是柯里化，场景说需要缓存的时候，没有深问，问了也不会。。。。</p> <ol start="22"><li>Vue3 Reactivity API 有用过吗？</li></ol> <p>没有，然后讲了一下 vue3 proxy 的缺陷</p> <ol start="23"><li>浏览器事件循环描述一下</li></ol> <p>主线程执行，任务队列，宏任务，微任务等等</p> <ol start="24"><li>关于缓存的一些东西？如何提高缓存命中率？</li></ol> <p>强缓存，expire 和 cache-control</p> <p>协商缓存，e-tag 和 last-modifed</p> <p>DNS 缓存</p> <p>缓存命中率这个刚开始没理解，后来面试小哥提醒了一下，自己讲了一下 webpack contenthash，回答到点上了。</p> <ol start="25"><li>详细描述一下输入 URL 到页面打开的过程，尽量详细</li></ol> <ul><li>DNS 解析，讲了 DNS 缓存查找的过程，浏览器缓存 》 服务器缓存 》 运营商缓存 》 域名公共服务</li> <li>TCP 三次握手建立连接，讲了三次握手的流程，syn -&gt; syn + ack -&gt; ack</li> <li>服务器返回资源，浏览器下载完成开始渲染，css 树，dom 树，渲染树</li> <li>TCP 四次挥手断开连接，fin -&gt; ack -&gt; fin -&gt; ack</li></ul> <p>TCP 连接是每次都要的吗？讲了一下 http 的 Connection: keep-alive nginx 默认开启的，也可以设置达到多少个连接以后就断开连接</p> <ol start="26"><li>数组和链表在计算机中存储的方式</li></ol> <p>数组：每个元素都会开辟一个内存，访问的时候也是自己就可以找到，时间复杂度是 O(1)</p> <p>链表：单向链表与双向链表，查找的时候需要遍历，时间复杂度 O(n)</p> <p>插入的时候，数组和链表那个性能更高？ 链表，数组需要移动很多位</p> <p>从内存空间上用计算机的方式，数组插入一个元素，push 这种不行。说了数组加 length 也不对。 不知道答案是啥</p> <ol start="27"><li>你有什么想问我的？</li></ol> <p>问了下自己面的那个部门（之前有猎头联系我说有赞教育比较急，所以问了下）。 得知有赞那边是先面过，然后根据个人情况分配。</p> <p>问了下技术氛围（听人说，有赞前端技术很强，所以问了下） 技术分享有，比我们多了个技术方案评审，感觉这个挺重要的。</p> <p>问了下工作节奏（猎头说 995，之前看新闻说 996） 995，周三周五 6 点走，不打卡，周六加班给调休。</p> <p>然后约了二面，视频 coding</p> <h4 id="二面-视频-coding"><a href="#二面-视频-coding" class="header-anchor">#</a> 二面（视频 coding）</h4> <p>时间比较短，写了两道，写的也不全对，前两道思路写出来了。算法题看了一会，不会~~~</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token comment">// Coding 须知：本次 Coding 时间限制为 45 分钟，共 3 道题，请量力答题</span>
<span class="token comment">/**
 * 1. 实现一个函数，判断两个变量值是否相等
 *
 * 注意
 * - 数据类型不限于示例，尽可能考虑边界
 * - function 引用相等即可
 */</span>
<span class="token keyword">const</span> foo1 <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  b<span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
  c<span class="token operator">:</span> <span class="token number">NaN</span><span class="token punctuation">,</span>
  d<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  f<span class="token operator">:</span> <span class="token punctuation">{</span>
    a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  g<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">const</span> foo2 <span class="token operator">=</span> <span class="token punctuation">{</span>
  a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  b<span class="token operator">:</span> <span class="token string">&quot;1&quot;</span><span class="token punctuation">,</span>
  c<span class="token operator">:</span> <span class="token number">NaN</span><span class="token punctuation">,</span>
  d<span class="token operator">:</span> <span class="token punctuation">[</span>
    <span class="token punctuation">{</span>
      a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
      b<span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">]</span><span class="token punctuation">,</span>
  f<span class="token operator">:</span> <span class="token punctuation">{</span>
    a<span class="token operator">:</span> <span class="token number">1</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  g<span class="token operator">:</span> <span class="token keyword">null</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">function</span> <span class="token function">isEqual</span><span class="token punctuation">(</span><span class="token parameter">target1<span class="token punctuation">,</span> target2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">isEqual</span><span class="token punctuation">(</span>foo1<span class="token punctuation">,</span> foo2<span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">&quot;isEqual&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">/**
 * 2. 实现 getValue 函数来获取path对应的值
 */</span>
<span class="token keyword">var</span> object <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">{</span> c<span class="token operator">:</span> <span class="token number">3</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">]</span> <span class="token punctuation">}</span><span class="token punctuation">;</span> <span class="token comment">// path: 'a[0].b.c'</span>
<span class="token keyword">var</span> array <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> a<span class="token operator">:</span> <span class="token punctuation">{</span> b<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// path: '[0].a.b[0]'</span>

<span class="token keyword">function</span> <span class="token function">getValue</span><span class="token punctuation">(</span><span class="token parameter">target<span class="token punctuation">,</span> valuePath<span class="token punctuation">,</span> defaultValue</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getValue</span><span class="token punctuation">(</span>object<span class="token punctuation">,</span> <span class="token string">&quot;a[0].b.c&quot;</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出3</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getValue</span><span class="token punctuation">(</span>array<span class="token punctuation">,</span> <span class="token string">&quot;[0].a.b[0]&quot;</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 1</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token function">getValue</span><span class="token punctuation">(</span>array<span class="token punctuation">,</span> <span class="token string">&quot;[0].a.b[0].c&quot;</span><span class="token punctuation">,</span> <span class="token number">12</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 输出 12</span>

<span class="token comment">/**
 * 问题 3
 * 将一天24小时按每半小划分成48段，我们用一个位图表示选中的时间区间，例如`110000000000000000000000000000000000000000000000`，
 * 表示第一个半小时和第二个半小时被选中了，其余时间段都没有被选中，也就是对应00:00~01:00这个时间区间。一个位图中可能有多个不连续的
 * 时间区间被选中，例如`110010000000000000000000000000000000000000000000`，表示00:00-1:00和02:00-02:30这两个时间区间被选中了。
 *
 * 要求：写一个函数timeBitmapToRanges，将上述规则描述的时间位图转换成一个选中时间区间的数组。
 * 示例输入：`&quot;110010000000000000000000000000000000000000000000&quot;`
 * 示例输出：`[&quot;00:00~01:00&quot;, &quot;02:00~02:30&quot;]`
 */</span>
<span class="token keyword">function</span> <span class="token function">timeBitmapToRanges</span><span class="token punctuation">(</span><span class="token parameter">str</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
  <span class="token function">timeBitmapToRanges</span><span class="token punctuation">(</span><span class="token string">&quot;110010000000000000000000000000000000000000000000&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>
  <span class="token function">timeBitmapToRanges</span><span class="token punctuation">(</span><span class="token string">&quot;110011000000110000000000000000000000000000001111&quot;</span><span class="token punctuation">)</span>
<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br></div></div><h4 id="三面-现场-1h20mins"><a href="#三面-现场-1h20mins" class="header-anchor">#</a> 三面（现场 1h20mins）</h4> <p>上来就是两页纸，我人懵了。。。因为已经做过线上 coding 了，没做好心理准备~~~，也没复习这方面的。。。。自己这方面也比较薄弱，两题写了 20mins 左右。</p> <ol><li>大数相加: 给定两个字符串形式的非负整数 num1 和 num2 ，计算它们的和。</li></ol> <p><a href="https://leetcode-cn.com/problems/add-strings/" target="_blank" rel="noopener noreferrer">leetcode 415. 字符串相加<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ol start="2"><li><p>写一个事件 Event 类，实现 on，off，emit，once 功能，同时 on 要支持 debounce。eg：on('click',function(){},500)</p></li> <li><p>介绍下让自己成长最大的项目？</p></li> <li><p>你觉得现在遇到的最难的问题是什么？</p></li></ol> <p>搞清楚面试官想问什么，当时自己感觉就是问题的解决方式？自己举例子来说明：医保 DLL 技术方案，首屏极致优化，自己通过 学习+总结+落地+分享 来论述了自己工作+学习的方法。也讲了一下当前自己在解决的一些问题，医院内网访问和微前端存在的一些问题等等</p> <ol start="5"><li>为什么要做微前端？</li></ol> <ul><li>线上发布优势</li> <li>和 iframe 对比：UI，加载速度，弹窗，通信，安全等等</li></ul> <ol start="6"><li>回到写的第二道题，说到了 setTimeout 设定的时间，函数能准确按时执行吗？</li></ol> <p>讲了一下宏任务和微任务，接着问 MutaionObserver 有用过吗？ 这个同事之前分享过，自己大概介绍了一下 rrweb 的使用，以及他是怎么用 MutaionObserver 监听 dom 节点变化的。</p> <ol start="7"><li>setTimeout 怎么能做到准时？</li></ol> <p>没法完全准时，只能减少延迟。应该就是问 JavaScript 高精度计时器，之前去有赞之前看到过这个问题，就讲了下通过声明变量，没执行一个宏任务，变量+1，到需要高精度计时器的时候，计算时间差，减少 setTimeout 的延迟。面试官引导到把 setTimeout 换成微任务，当时自己说的是用 promise 和计数的方式做一个，但是时间这个怎么控制不太清楚。</p> <ol start="8"><li>js 多线程</li></ol> <p>开始不太理解想问啥，就举例子说了 js 如果是多线程的，可能会造成页面 dom 操作冲突。然后面试官就问 js 支持不支持多线程，我说了是。面试官：以什么样的形式支持？我答：web worker（猜的。。。）接着问了：node 端的有没有？不知道。。。然后问了 web worker 的简单实用</p> <ol start="9"><li>进程和线程的区别</li></ol> <ul><li>调度单位不同 (自己只答了这个，其他的大学学过，记不住。。。)</li> <li>进程在执行过程中拥有独立的内存单元，而多个线程共享内存</li> <li>不同进程间数据很难共享,同一进程下不同线程间数据很易共享</li> <li>进程间不会相互影响，一个线程挂掉将导致整个进程挂掉</li> <li>进程使用的内存地址可以上锁</li></ul> <ol start="10"><li>进程内存计算机如何分配？线程资源如何分配？</li></ol> <p>猜了一个根据 IO 读取率来，就没说了~~~</p> <ol start="11"><li>cookie、sessionStorage、localStorage 区别</li></ol> <p>可能前面俩问题答得不好，就问了个简单的。。。</p> <ol start="12"><li>跨域的解决方案</li></ol> <p>cors，jsonp，nginx 反向代理，possMessage</p> <ol start="13"><li>em / rem / vh / vw 区别</li></ol> <p>简单，随便写写</p> <ol start="14"><li><p>设置一个盒子的高度永远比窗口可视高度小 100px
<code>height: calc(100vh - 100px)</code></p></li> <li><p>移动端 1px 边框</p></li></ol> <p>面试官大哥说了，看你项目 PC 端多一些，有个移动端的问题，我感觉还是要问一下，结果就是我不会，hhh</p> <p>我只知道用 css3 的缩放，translate：scale(0.5)，答得半对吧</p> <p>参考下：<a href="https://juejin.cn/post/6844903877947424782" target="_blank" rel="noopener noreferrer">移动端 1px 解决方案<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></p> <ol start="16"><li>html 可替换元素</li></ol> <p>当时我蒙蔽了，没听说过这个名词。不过面试官小哥还是蛮好的，会换种方式问你，和 img 相似的元素有哪些？引导到 audio，video 等等</p> <ol start="17"><li>一个图片对应多个 cdn 地址，如果第一个不能用了，需要换成下一个，怎么做？</li></ol> <p>面试官小哥提醒了下 img 标签的 onError 事件，我说了通过一个队列维护图片 cdn 地址的信息，然后通过 onError 事件做一些替换 src 的操作。实际上这里我感觉面试官更想问的是借助 promise.all 和 race 来实现，当时没想起来</p> <ol start="18"><li>vue 生命周期</li></ol> <p>说了下每个生命周期，以及每个生命周期源码内部干了啥，以及我们开发的时候一般用于干啥。</p> <ol start="19"><li>改变组件 data 里面的东西会触发什么生命周期？</li></ol> <p>当时说，beforeUpdate,update 都会执行。实际上是 data 改变，beforeUpdate 会执行，但是只有 re-render 和 patch 之后，才会执行 update。</p> <ol start="20"><li>vue2.x 响应式原理</li></ol> <p>和一面问题一样</p> <ol start="21"><li>Object.defineProperty 参数；for in可以遍历出来那些东西</li></ol> <div class="language-js line-numbers-mode"><pre class="language-js"><code>Object<span class="token punctuation">.</span><span class="token function">defineProperty</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token string">&quot;key&quot;</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
  enumerable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  configurable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  writable<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
  value<span class="token operator">:</span> <span class="token string">&quot;static&quot;</span><span class="token punctuation">,</span>
  <span class="token function">get</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">读取 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 属性</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    <span class="token keyword">return</span> value<span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token function">set</span><span class="token punctuation">(</span>newVal<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">设置 </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>key<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> 属性为: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>newVal<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
    value <span class="token operator">=</span> <span class="token function">reactify</span><span class="token punctuation">(</span>newVal<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><ol start="22"><li>for in可以遍历数组吗？可以遍历出那些东西？</li></ol> <p>可以，拿到的是下标。</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">let</span> a <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">5</span><span class="token punctuation">]</span>
<span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">let</span> key <span class="token keyword">in</span> a<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>key<span class="token punctuation">,</span>a<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br></div></div><ol start="23"><li>Vue3为什么要使用Composition Api</li></ol> <p>和Options Api对比了一下，讲了一会</p> <ol start="24"><li>vue组件 scoped作用；有没有了解过其他的css隔离方案？</li></ol> <p>组件的Css隔离，加了以后会变成</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token punctuation">.</span>example<span class="token punctuation">[</span>data<span class="token operator">-</span>v<span class="token operator">-</span>xxxxx<span class="token punctuation">]</span> <span class="token punctuation">{</span>
  color<span class="token operator">:</span> red<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br></div></div><p>讲了下CSS隔离方案： css modules / css in js / style-component</p> <ol start="25"><li>图片懒加载</li></ol> <p>图片data-src替换src ，讲了下虚拟滚动，新增和删除DOM。</p> <p>面试小哥问了下DOM节点复用，就不用删除和新增了，是个好办法~~~</p> <ol start="26"><li>用ES5 去实现ES6类的继承</li></ol> <p>说了下原型链继承。</p> <p>问了下，怎么把两个原型关联起来，方法有很多，自己只说了直接赋值，其实构造函数也可以。得下去好好复习下继承</p> <ol start="27"><li>你个人觉得 eslint 有哪些规则比较有用？</li></ol> <p>说了下全局变量处理，以及严格模式下有些代码运行报错等</p> <p>react hooks useState里面if判断这个应该说下的，忘记了</p> <ol start="28"><li>http1.1和http2的区别</li></ol> <p>答了四点：</p> <ul><li>首部压缩</li> <li>二进制分贞</li> <li>多路复用</li> <li>服务器推送</li></ul> <p>接着问了下，在http1.1中用的哪些优化手段，会在http2中失效？当时有点懵了，乱说了一通，这也是自己的毛病，答非所问。</p> <p>看我说不出来，就问了下http1.1中我们做了哪些项目优化？讲了讲强缓存，协商缓存，DNS缓存，http长连接等等</p> <p>然后问了下http2.0还存在什么问题？不知道~~~</p> <p>接着问了http3，我问了下http3用UDP怎么保证安全性，面试官小哥说了应用层</p> <p>接着换个问题，TCP和UDP的区别。说了连接方式，报文传输方式，其他的想不起来了</p> <p>聊了近一个半小时，终于结束了~~~面试小哥说让我等会，告诉了我卫生间在那，就走了，面试体验还是挺不错的，有些不知道的问题。面试官会换种问法，实在答不出来也会跟你说为什么？</p> <h4 id="四面-主管50mins"><a href="#四面-主管50mins" class="header-anchor">#</a> 四面（主管50mins）</h4> <ol><li><p>自我介绍</p></li> <li><p>说一说最近一年多做的最好的业务？你觉得你做的最出彩的地方是哪里？</p></li></ol> <p>拿了纸和笔，画了画系统流程。说了说医保及打印的方案</p> <ol start="3"><li>项目优化?</li></ol> <p>提到了客户端存放前端静态代码，开机自动启动拉取最新代码。用户打开时，只需要从本地获取前端静态资源。</p> <p>接着问到，用户如果正在操作，这个时候本地缓存才获取成功，怎么办？</p> <p>说了通过mutationObserver监听dom节点有没有在变化，来判断用户是否在操作，决定要不要使用缓存资源。</p> <ol start="4"><li>处方打印，不同格式如何设置？</li></ol> <p>通过模板化，将标准版本和自定义版本分开，通过医院配置设置当前医院需要的模板内容。</p> <ol start="5"><li><p>离线缓存 存在什么问题？</p></li> <li><p>讲一讲权限系统？除了RBAC，还了解哪些权限设计吗？RBAC的优点？</p></li> <li><p>给你一个需求：除了预设角色，某个人可以单独做其他的事情？怎么办</p></li></ol> <p>开始自己理解是自定义角色，说了以后，面试官说不是这个。</p> <p>然后就有点懵了.我们的权限系统更多的是从某一个点来出发，要实现上面的需求，自定义角色就可以。应该还有其他的方式，得扩展下视野，研究一波。</p> <ol start="8"><li>讲一讲你们做的微前端？ 父应用如何加载多个子应用？ 路由整合是如何做的？</li></ol> <p>single-spa自己了解的不多，简历里写的也是参与了微前端建设。得研究下，路由之间是如何加载的？这个确实完全没思路，不然还能吹两句。。。</p> <ol start="9"><li><p>讲一讲局部打印的实现？</p></li> <li><p>api-proxy是如何实现的？业务越来越复杂，nginx是不是每次都要改？怎么解决？</p></li></ol> <p>有赞有一个开源的zan-proxy。优化方面，说到了用node统一服务进行中转，不再借助于nginx。</p> <ol start="11"><li>对项目不侵入，除了chrome插件，还有什么办法做这个？怎么做一个全局代理？</li></ol> <p>这个问题有的尴尬，之前想过这个问题，但是说实话，不知道怎么做，视野太狭隘。。。。</p> <ol start="12"><li>在本地如何调试线上代码？</li></ol> <p>直接就说了，暂时还没搞过。。。这是个大问题，记下来</p> <ol start="13"><li>讲一下项目中定制化需求如何处理？</li></ol> <p>现在我们的形式都是一套代码里面改，通过权限+医院模式去做各种判断，说实话这种方式很难维护。我们项目体量小，我自己感觉都已经不好维护了。后面越来越多的迭代怎么办？ 这也是我需要思考的问题，如何区分标准化产品和定制化产品？</p> <p>面试官举了一个有赞的场景例子：关于不同商家后台，某个商家多了一个菜单？某个商家在通用页面A中有特殊的两个按钮？如何处理这种个性化的问题？深入一点，如何把个性化需求开放给其他商家自己开发？</p> <p>刚开始自己更多的还是想着权限点来控制（现有业务就是，启发自己需要多去看看外界的解决方案，眼界不能狭隘），但是这种情况对标准化产品代码是侵入的，而且需要自己的人力来开发。后面自己又临时想了一种通过留坑的形式，把个性化菜单交给其他开发者，通过url带一些个性化参数来判断页面展示逻辑。</p> <p>在问到如何做成一个开放平台的时候，自己有点懵，没接触过，没想太多这种。确实现在的业务场景没有那么复杂，考虑不到这些问题。害，多看看其他公司的解决方案吧，不能局限于一家公司</p> <ol start="14"><li>如果让你写一个single-spa，你怎么做？两个子应用的app.js如何切换？</li></ol> <p>关于single-spa自己了解的很少。。。简历也只是提到参与了。。。确实是自己准备的不足。害，好好学习吧、</p> <p>接着问到了js、css如何隔离？说了js通过proxy，css隔离通过添加子应用名称的class</p> <p>接着问了，作为攻击者，如何突破用proxy实现的一个沙箱环境，或者说子应用如何才能访问父应用的window对象？</p> <p>面试官笑了笑，我也笑了笑。</p> <p>想了半天，吹了下 子应用往整个body里面插入script脚本来访问全局window。</p> <p>面试官说：ok，这是一个办法。那现在我把这个路子封了，怎么办？</p> <p>想了一会，开始说胡话了。。。。然后面试官就终止了这个话题。得去了解下proxy能不能被突破？或者这个想问的仅仅是proxy handler？</p> <ol start="15"><li>讲一讲项目中的全键盘操作？keyup监听怎么做的？</li></ol> <p>说到了addEventListener第三个参数，然后问了冒泡和捕获的流程，自己举了一个ul和li的例子。</p> <p>接着问题，页面中一个点击事件，先捕获还是先冒泡？ 因为想到addEventListener第三个参数默认是false，就说了先冒泡，搞错了。事件机制应该是捕获-》目标阶段-》冒泡</p> <p>接着问题，如何阻止冒泡事件？e.stopPropagation 那如果是你这个全键盘操作，怎么阻止部分按键？通过keycode拦截</p> <ol start="16"><li>oAuth 2.0 工作流程</li></ol> <p>讲了一下我现在工作接入AC单点登录的一个流程。clientId+URI跳转到AC，用户登录完成，通过URI带上Code，返回原应用。前端拿code和后端换token，后端去AC校验token有效性。</p> <p>貌似我们用的不是标准oAuth 2.0</p> <ol start="17"><li>你为什么想出来看机会？</li></ol> <p>和自己组长聊过，组长的话，问我在现在公司以后的成长之路怎么样，我自己反思了一遍，感觉不大。也是通过身边有有赞的同事，感觉他们很强，所以来有赞试试的</p> <p>说了很多啰嗦话，可能聊得比较久了，面试官开始了下一个问题</p> <ol start="18"><li>对下一份工作期望是怎么样的？</li></ol> <p>自己说了技术栈，希望自己能用用react做pc，丰富自己的技术栈或者vue做toC，更加锻炼人。</p> <ol start="19"><li>你现在是怎么学习的？</li></ol> <p>学习+总结写文章+落地+分享（团队、外部）</p> <p>基础知识啃书，新技术看视频，然后再去看官方文档。经常看一下前端大会，前端早早聊，D2等</p> <p>博客+学习打卡，自己约束自己。</p> <p>说完之后，面试官给了一个建议，多去看看MDN。自己也说了一般会在搜索api的时候会用到，面试官的意思是直接去看MDN的文章，我可能看的很多知识都是二手的，要自己多去研究研究。
20. 你有什么想问的？</p> <p>对我有什么建议？ 多去看MDN，业务多多理解</p> <p>对我现在水平的评价？我有没有达到一年半前端的一个标准水平？</p> <p>可能问这个问题不太好，因为当时自己面了好久了，中午也没吃饭，整个人有的晕，也有点抖，感觉要挂了~~~有点害怕。</p> <p>然后面试官说我现在成长的空间很大，一年半前端的水平还行。我当时心里的活动就是完了，可能要凉。。。接着就让我等一下，估计是去讨论去了，自己也知道，接下来如果有hr来，就80%过了。找个理由说hr不在的，基本就凉了。。。</p> <h4 id="五面-hrbp40mins"><a href="#五面-hrbp40mins" class="header-anchor">#</a> 五面（HRBP40mins）</h4> <p>等待的时间是非常煎熬的~ 一会（忘记了是多久，差不多10分钟？），HR小姐姐来了，换了个位置，开始面对面谈。</p> <ol><li><p>刚刚聊下来感觉怎么样？
自己感觉还是有些不足，就实话实说了。甚至都说了，不管怎么样，什么样的结果，自己都还会去好好学</p></li> <li><p>对自己1-3年的规划</p></li> <li><p>介绍一下你在微医的工作</p></li> <li><p>做的业务，最大的风险是什么？</p></li></ol> <p>说了医保相关，hr小姐姐问我，前端如何做容灾处理？</p> <ol start="5"><li><p>项目容灾处理是提前考虑到的还是后续遇到自发提出来的？</p></li> <li><p>前端方面有没有犯过比较大的故障？</p></li></ol> <p>说了一个前端判断的问题，和hr小姐姐解释了挺久，可能是自己描述的不清楚。</p> <ol start="7"><li>有没有什么问题会因为前端人手不够，没有去解决的？</li></ol> <p>我还是那个毛病，罗里吧嗦，然后胡说。说到最后自己都不知道自己在说啥。。。</p> <ol start="8"><li>绩效好的情况下为什么要考虑机会？</li></ol> <p>还是说了自己成长的问题，想要一个成长的环境。</p> <ol start="9"><li><p>你是想要更复杂的业务域吗？你们组没有其他复杂的业务域吗？</p></li> <li><p>你觉得自己还能在现在的业务中成长多少？或者说你还能为现在的业务做什么？</p></li> <li><p>当前业务还有哪些问题需要去处理？</p></li></ol> <p>标志产品和定制化产品区分</p> <ol start="12"><li><p>平时除了工作上的东西，自己还有什么学习方式？</p></li> <li><p>你希望自己3年以后能达到什么水平？你觉得自己和P6差距在哪？</p></li> <li><p>平时的工作节奏？
早上8点+ 到 晚上8+</p></li> <li><p>项目管理？做这个笔记对自己的成长？</p></li></ol> <p>用手机给hr小姐姐看了下，我做的一些项目管理，有道云笔记</p> <ol start="16"><li><p>你对加入有赞的一些期待是什么？薪资是怎么样的期待？有没有其他offer？</p></li> <li><p>你有什么想问的？</p></li></ol> <p>问了下工作节奏：995，不打卡，加班给调休，五险一金全额。</p> <p>问了下面的部门：业务技术前端</p> <p>问了下什么时候能给结果？也说了自己有三个offer，年前需要给答复，HR小姐姐说，明天尽快。</p> <p>等我到门口的时候，又问了下离职时间。这个时候自己才感觉有戏~~~~</p> <h2 id="离职"><a href="#离职" class="header-anchor">#</a> 离职</h2> <p>等待还是最煎熬的，害怕自己挂掉~~~</p> <p>终于，第二天中午给我电话了，下午发了满意的offer。接着自己就去找领导提离职了，领导说有点突然，他要开车回家，就搁置了一下，到晚上的时候，自己又主动找了下领导，当时也没说出结果。</p> <h2 id="过年准备"><a href="#过年准备" class="header-anchor">#</a> 过年准备</h2></div></div> <div class="page-edit"><div class="tags"><a href="/tags/?tag=%E9%9D%A2%E8%AF%95" title="标签">#面试</a></div> <div class="last-updated"><span class="prefix">最近更新时间：</span> <span class="time">2021/05/01 17:06:28</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><!----> <a href="/pages/ac34940436a4a/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">前端基础知识整理01</div></a></div> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/pages/ac34940436a4a/">前端基础知识整理01</a>→
      </span></p></div></div></div> <div class="theme-vdoing-wrapper article-list bg-style-10"><div class="article-title"><a href="/archives/" class="fa fa-pencil-alt">
      最近更新
    </a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><div><a href="/pages/512f6ae339a31/"><div>【TypesScript主题月】5.7</div></a></div> <div class="date"><span>2021/05/06 00:00:00</span></div></dt></dl><dl><dd>02</dd> <dt><div><a href="/pages/136f8f068dffe/"><div>【React主题月】4月完结</div></a></div> <div class="date"><span>2021/04/30 00:00:00</span></div></dt></dl><dl><dd>03</dd> <dt><div><a href="/pages/55e7bb3eb7802/"><div>【算法打卡】先来一个波集合</div></a></div> <div class="date"><span>2021/04/22 00:00:00</span></div></dt></dl> <div class="more-box"><a href="/archives/" class="more"><i class="fas fa-angle-double-right"></i>前往更多 ...
      </a></div></div></div> <div class="comments-wrapper" style="display:none;"><!----></div></main></div> <div class="footer-wrapper" data-v-51417878 data-v-51417878><span class="footer-reco-theme" data-v-51417878><i class="iconfont reco-github" data-v-51417878></i> <a target="blank" href="https://github.com/alexwjj/alexwjj.github.io" data-v-51417878>alexwjj.github.io@5.0</a></span> <!----> <span class="footer-copyright" data-v-51417878><i class="iconfont reco-copyright" data-v-51417878></i> <a data-v-51417878><span data-v-51417878>俊劫</span> <span class="ml5" data-v-51417878>
          2018 - 2021
        </span></a></span> <span class="footer-view-site" data-v-51417878><i class="iconfont reco-eye" data-v-51417878></i> <span id="busuanzi_container_site_uv" data-v-51417878>
        访客数：<span id="busuanzi_value_site_uv" class="num" data-v-51417878>-</span></span> <span id="busuanzi_container_site_pv" class="ml5" data-v-51417878>
        访问量：<span id="busuanzi_value_site_pv" class="num" data-v-51417878>-</span></span></span> <!----></div> <!----></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><!----><div></div></div></div>
    <script src="/assets/js/app.070ad525.js" defer></script><script src="/assets/js/2.1d15da37.js" defer></script><script src="/assets/js/38.4e0ec907.js" defer></script><script src="/assets/js/4.aab0e518.js" defer></script>
  </body>
</html>
